<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=5.0">
    <title>百度贴吧 - 页面原型设计</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 响应式基础设置 */
        html {
            font-size: 16px;
            scroll-behavior: smooth;
        }

        @media (max-width: 768px) {
            html {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            html {
                font-size: 12px;
            }
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* CSS变量定义 */
        :root {
            --primary-color: #007AFF;
            --secondary-color: #5856D6;
            --success-color: #34C759;
            --warning-color: #FF9500;
            --error-color: #FF3B30;
            --text-primary: #000000;
            --text-secondary: #8E8E93;
            --background-primary: #FFFFFF;
            --background-secondary: #F2F2F7;
            --border-color: #C6C6C8;
            --shadow-light: rgba(0, 0, 0, 0.1);
            --shadow-medium: rgba(0, 0, 0, 0.2);
            --shadow-heavy: rgba(0, 0, 0, 0.3);
            --border-radius-small: 8px;
            --border-radius-medium: 12px;
            --border-radius-large: 16px;
            --transition-fast: 0.2s ease;
            --transition-medium: 0.3s ease;
            --transition-slow: 0.5s ease;
        }

        /* 弹性容器系统 */
        .container {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding: 0 clamp(1rem, 4vw, 2rem);
        }

        @media (max-width: 768px) {
            .container {
                max-width: 100%;
                padding: 0 1rem;
            }
        }

        /* 弹性网格系统 */
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-lg);
        }

        .flex-item {
            flex: 1;
            min-width: 0;
        }

        .flex-item-auto {
            flex: 0 0 auto;
        }

        .grid-container {
            display: grid;
            gap: var(--spacing-lg);
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }

        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;
                gap: var(--spacing-md);
            }
        }

        /* 响应式按钮系统 */
        .btn {
            padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
            border: none;
            border-radius: var(--border-radius-md);
            cursor: pointer;
            font-size: clamp(0.875rem, 2vw, 1rem);
            font-weight: 600;
            transition: all 0.3s ease;
            min-height: 44px; /* 触摸友好的最小高度 */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            white-space: nowrap;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            color: white;
            box-shadow: var(--shadow-medium);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-heavy);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 1);
            transform: translateY(-1px);
        }

        /* 触摸设备优化 */
        @media (hover: none) and (pointer: coarse) {
            .btn:hover {
                transform: none;
            }
            
            .btn:active {
                transform: scale(0.98);
            }
        }

        /* 响应式导航栏样式 */
        .navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: var(--shadow-light);
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid var(--border-color);
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: clamp(0.75rem, 2vw, 1rem) clamp(1rem, 4vw, 2rem);
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            position: relative;
        }

        .logo {
            font-size: clamp(1.25rem, 4vw, 1.5rem);
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            flex-shrink: 0;
        }

        /* 汉堡菜单按钮 */
        .nav-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 0.5rem;
            background: none;
            border: none;
            z-index: 1001;
        }

        .nav-toggle span {
            width: 25px;
            height: 3px;
            background: var(--text-primary);
            margin: 3px 0;
            transition: all 0.3s ease;
            border-radius: 2px;
        }

        .nav-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .nav-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .nav-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -6px);
        }

        .nav-links {
            display: flex;
            gap: clamp(1rem, 3vw, 2rem);
            list-style: none;
            align-items: center;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-primary);
            font-size: clamp(0.875rem, 2vw, 1rem);
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius-md);
            position: relative;
        }

        .nav-links a:hover {
            color: var(--primary-color);
            background: rgba(102, 126, 234, 0.1);
            transform: translateY(-1px);
        }

        .nav-user {
            display: flex;
            gap: clamp(0.5rem, 2vw, 1rem);
            align-items: center;
            flex-shrink: 0;
        }

        /* 移动端导航样式 */
        @media (max-width: 768px) {
            .nav-toggle {
                display: flex;
            }

            .nav-links {
                position: fixed;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100vh;
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 2rem;
                transition: left 0.3s ease;
                z-index: 1000;
            }

            .nav-links.active {
                left: 0;
            }

            .nav-links a {
                font-size: 1.25rem;
                padding: 1rem 2rem;
                width: 80%;
                text-align: center;
                border: 1px solid var(--border-color);
                background: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }

            .nav-user {
                gap: 0.5rem;
            }

            .nav-user .btn {
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
            }
        }

        @media (max-width: 480px) {
            .nav-container {
                padding: 0.75rem 1rem;
            }

            .nav-user .btn {
                padding: 0.4rem 0.8rem;
                font-size: 0.8rem;
            }
        }

        /* 首页样式 */
        .homepage {
            min-height: 100vh;
        }

        /* 轮播图区域 */
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 60px 20px;
            text-align: center;
            margin-bottom: 40px;
        }

        .hero-content h1 {
            font-size: 48px;
            margin-bottom: 20px;
            font-weight: 300;
        }

        .hero-content p {
            font-size: 20px;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .search-box {
            display: flex;
            max-width: min(600px, 90vw);
            width: 100%;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 25px;
            overflow: hidden;
            box-shadow: var(--shadow-heavy);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .search-input {
            flex: 1;
            padding: clamp(0.75rem, 3vw, 1rem) clamp(1rem, 4vw, 1.25rem);
            border: none;
            font-size: clamp(0.875rem, 3vw, 1rem);
            outline: none;
            background: transparent;
            color: var(--text-primary);
            min-height: 44px; /* 触摸友好 */
        }

        .search-input::placeholder {
            color: var(--text-tertiary);
        }

        .search-btn {
            background: linear-gradient(135deg, var(--accent-color), #ff9800);
            color: white;
            border: none;
            padding: clamp(0.75rem, 3vw, 1rem) clamp(1.5rem, 4vw, 2rem);
            font-size: clamp(0.875rem, 3vw, 1rem);
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            min-height: 44px; /* 触摸友好 */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .search-btn:hover {
            background: linear-gradient(135deg, #ff9800, var(--accent-color));
            transform: translateY(-1px);
            box-shadow: var(--shadow-medium);
        }

        @media (hover: none) and (pointer: coarse) {
            .search-btn:hover {
                transform: none;
            }
            
            .search-btn:active {
                transform: scale(0.98);
            }
        }

        @media (max-width: 480px) {
            .search-box {
                border-radius: 20px;
            }
            
            .search-btn {
                padding: 0.75rem 1.25rem;
            }
        }

        /* 弹性主要内容区域 */
        .main-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
            gap: clamp(1rem, 4vw, 2rem);
            margin-bottom: clamp(2rem, 6vw, 3rem);
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }

        /* 热门贴吧列表 */
        .hot-tiebas {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .icon {
            font-size: 18px;
        }

        .tieba-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
            gap: clamp(0.75rem, 2vw, 1rem);
        }

        @media (max-width: 480px) {
            .tieba-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                gap: 0.75rem;
            }
        }

        .tieba-item {
            text-align: center;
            padding: 15px 10px;
            border-radius: 8px;
            transition: all 0.3s;
            cursor: pointer;
            border: 1px solid #f0f0f0;
        }

        .tieba-item:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .tieba-avatar {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            margin: 0 auto 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }

        .tieba-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tieba-members {
            font-size: 12px;
            color: #999;
        }

        /* 热门帖子列表 */
        .hot-posts {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }

        .post-list {
            display: flex;
            flex-direction: column;
            gap: clamp(0.75rem, 2vw, 1rem);
        }

        .post-item {
            padding: clamp(0.75rem, 3vw, 1rem);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-md);
            transition: all 0.3s ease;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .post-item:hover {
            background: rgba(255, 255, 255, 1);
            border-color: var(--primary-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
        }

        @media (hover: none) and (pointer: coarse) {
            .post-item:hover {
                transform: none;
            }
            
            .post-item:active {
                transform: scale(0.98);
            }
        }

        .post-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
        }

        .post-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .post-meta {
            flex: 1;
        }

        .post-author {
            font-weight: bold;
            color: #333;
            font-size: 14px;
        }

        .post-time {
            color: #999;
            font-size: 12px;
        }

        .post-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .post-content {
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: var(--spacing-sm);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .post-stats {
            display: flex;
            gap: var(--spacing-lg);
            font-size: 13px;
            color: var(--text-tertiary);
        }

        .post-stat {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            font-weight: 500;
        }

        /* 贴吧详情页样式 */
        .tieba-detail {
            background: var(--bg-primary);
            min-height: 100vh;
        }

        .tieba-header {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 50%, rgba(240, 147, 251, 0.9) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            color: white;
            padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-xl);
            position: relative;
            overflow: hidden;
        }

        .tieba-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="2" fill="rgba(255,255,255,0.1)"><animate attributeName="r" values="1;3;1" dur="4s" repeatCount="indefinite"/></circle><circle cx="75" cy="75" r="1.5" fill="rgba(255,255,255,0.1)"><animate attributeName="r" values="0.5;2.5;0.5" dur="3s" repeatCount="indefinite" begin="1s"/></circle></svg>') repeat;
            animation: float 15s ease-in-out infinite;
        }

        .tieba-info {
            display: flex;
            align-items: center;
            gap: var(--spacing-lg);
            margin-bottom: var(--spacing-lg);
            position: relative;
            z-index: 1;
        }

        .tieba-main-avatar {
            width: 80px;
            height: 80px;
            border-radius: var(--radius-large);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-color);
            box-shadow: var(--shadow-medium);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .tieba-details h1 {
            font-size: 28px;
            margin-bottom: var(--spacing-sm);
            font-weight: 700;
        }

        .tieba-description {
            opacity: 0.9;
            margin-bottom: var(--spacing-md);
            font-size: 16px;
            font-weight: 400;
        }

        .tieba-stats {
            display: flex;
            gap: var(--spacing-xl);
            font-size: 14px;
            opacity: 0.9;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            font-weight: 500;
        }

        /* 操作按钮栏 */
        .action-bar {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: var(--spacing-lg);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: var(--shadow-light);
        }

        .action-buttons {
            display: flex;
            gap: var(--spacing-md);
        }

        .search-bar {
            display: flex;
            gap: var(--spacing-sm);
            align-items: center;
        }

        .search-bar input {
            padding: var(--spacing-sm) var(--spacing-md);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-medium);
            width: 200px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            font-size: 14px;
        }

        .search-bar input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }

        /* 帖子列表表格 */
        .posts-table-container {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            margin: var(--spacing-lg);
            border-radius: var(--radius-large);
            overflow: hidden;
            box-shadow: var(--shadow-medium);
            border: 1px solid var(--border-color);
        }

        .posts-table {
            width: 100%;
            border-collapse: collapse;
        }

        .posts-table th {
            background: rgba(248, 249, 250, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            padding: var(--spacing-md);
            text-align: left;
            font-weight: 600;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
            font-size: 14px;
        }

        .posts-table td {
            padding: var(--spacing-md);
            border-bottom: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }

        .posts-table tr:hover td {
            background: rgba(255, 255, 255, 0.8);
            transform: scale(1.01);
        }

        .post-title-cell {
            max-width: 300px;
        }

        .post-title-link {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            display: block;
            margin-bottom: var(--spacing-xs);
            transition: all 0.3s ease;
        }

        .post-title-link:hover {
            color: var(--secondary-color);
            transform: translateX(4px);
        }

        .post-tags {
            display: flex;
            gap: var(--spacing-xs);
            flex-wrap: wrap;
        }

        .tag {
            background: linear-gradient(135deg, rgba(88, 86, 214, 0.1), rgba(0, 122, 255, 0.1));
            padding: 2px var(--spacing-sm);
            border-radius: var(--radius-small);
            font-size: 12px;
            color: var(--primary-color);
            font-weight: 500;
            border: 1px solid rgba(0, 122, 255, 0.2);
        }

        /* 发帖页面样式 */
        .create-post-page {
            background: var(--bg-primary);
            min-height: 100vh;
            padding: var(--spacing-2xl) var(--spacing-lg);
        }

        .create-post-container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: var(--radius-large);
            padding: var(--spacing-2xl);
            box-shadow: var(--shadow-medium);
            border: 1px solid var(--border-color);
        }

        .page-title {
            font-size: 32px;
            color: var(--text-primary);
            margin-bottom: var(--spacing-xl);
            text-align: center;
            font-weight: 700;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .form-group {
            margin-bottom: var(--spacing-lg);
        }

        .form-label {
            display: block;
            margin-bottom: var(--spacing-sm);
            font-weight: 600;
            color: var(--text-primary);
            font-size: 14px;
        }

        .form-input {
            width: 100%;
            padding: var(--spacing-md);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-medium);
            font-size: 16px;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
            background: rgba(255, 255, 255, 0.95);
        }

        .form-select {
            width: 100%;
            padding: var(--spacing-md);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-medium);
            font-size: 16px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .form-select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }

        .editor-container {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-medium);
            min-height: 300px;
            padding: var(--spacing-md);
            background: rgba(250, 250, 250, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .editor-toolbar {
            display: flex;
            gap: var(--spacing-sm);
            padding-bottom: var(--spacing-sm);
            border-bottom: 1px solid var(--border-color);
            margin-bottom: var(--spacing-md);
        }

        .editor-btn {
            padding: var(--spacing-xs) var(--spacing-sm);
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: var(--radius-small);
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .editor-btn:hover {
            background: rgba(255, 255, 255, 0.95);
            border-color: var(--primary-color);
            transform: translateY(-1px);
        }

        .editor-content {
            min-height: 200px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
            padding: var(--spacing-md);
            border-radius: var(--radius-small);
            outline: none;
            transition: all 0.3s ease;
        }

        .editor-content:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }

        .image-upload-area {
            border: 2px dashed var(--border-color);
            border-radius: var(--radius-medium);
            padding: var(--spacing-xl);
            text-align: center;
            background: rgba(250, 250, 250, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .image-upload-area:hover {
            border-color: var(--primary-color);
            background: rgba(248, 249, 250, 0.9);
            transform: translateY(-2px);
            box-shadow: var(--shadow-light);
        }

        .upload-icon {
            font-size: 48px;
            color: var(--text-tertiary);
            margin-bottom: var(--spacing-sm);
        }

        .upload-text {
            color: var(--text-secondary);
            margin-bottom: var(--spacing-xs);
            font-weight: 500;
        }

        .upload-hint {
            color: var(--text-tertiary);
            font-size: 12px;
        }

        .emoji-selector {
            display: flex;
            gap: var(--spacing-sm);
            flex-wrap: wrap;
            padding: var(--spacing-md);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-medium);
            background: rgba(250, 250, 250, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .emoji-item {
            font-size: 24px;
            cursor: pointer;
            padding: var(--spacing-xs);
            border-radius: var(--radius-small);
            transition: all 0.3s ease;
        }

        .emoji-item:hover {
            background: rgba(233, 236, 239, 0.8);
            transform: scale(1.2);
        }

        .form-actions {
            display: flex;
            gap: var(--spacing-md);
            justify-content: flex-end;
            margin-top: var(--spacing-xl);
        }

        .btn-large {
            padding: var(--spacing-md) var(--spacing-xl);
            font-size: 16px;
        }

        /* 用户个人中心样式 */
        .user-profile {
            background: var(--bg-primary);
            min-height: 100vh;
        }

        .profile-header {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 50%, rgba(240, 147, 251, 0.9) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            color: white;
            padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-2xl);
            position: relative;
            overflow: hidden;
        }

        .profile-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="30" cy="30" r="2" fill="rgba(255,255,255,0.1)"><animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite"/></circle><circle cx="70" cy="70" r="1.5" fill="rgba(255,255,255,0.1)"><animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite" begin="1s"/></circle></svg>') repeat;
            animation: float 20s ease-in-out infinite;
        }

        .profile-info {
            display: flex;
            align-items: center;
            gap: var(--spacing-xl);
            position: relative;
            z-index: 1;
        }

        .profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            font-weight: 700;
            color: var(--primary-color);
            border: 4px solid rgba(255, 255, 255, 0.3);
            box-shadow: var(--shadow-heavy);
        }

        .profile-details h1 {
            font-size: 32px;
            margin-bottom: var(--spacing-sm);
            font-weight: 700;
        }

        .profile-bio {
            opacity: 0.9;
            margin-bottom: var(--spacing-md);
            font-size: 16px;
            font-weight: 400;
        }

        .profile-stats {
            display: flex;
            gap: var(--spacing-2xl);
            font-size: 14px;
            opacity: 0.9;
        }

        /* 触摸设备优化 */
        @media (hover: none) and (pointer: coarse) {
            /* 移除悬停效果，添加触摸反馈 */
            .btn:hover,
            .post-item:hover,
            .tieba-item:hover,
            .search-btn:hover,
            .emoji-item:hover {
                transform: none;
                box-shadow: none;
            }

            .btn:active,
            .post-item:active,
            .tieba-item:active,
            .search-btn:active {
                transform: scale(0.98);
                opacity: 0.8;
            }

            /* 增大触摸目标 */
            .btn,
            .nav-links a,
            .nav-user .btn,
            .search-btn {
                min-height: 44px;
                min-width: 44px;
            }

            /* 优化表单元素 */
            .search-input,
            .editor-content,
            input,
            textarea,
            select {
                font-size: 16px; /* 防止iOS缩放 */
                min-height: 44px;
            }
        }

        /* 高对比度模式支持 */
        @media (prefers-contrast: high) {
            :root {
                --text-primary: #000000;
                --text-secondary: #333333;
                --border-color: #000000;
                --shadow-light: rgba(0, 0, 0, 0.3);
                --shadow-medium: rgba(0, 0, 0, 0.5);
                --shadow-heavy: rgba(0, 0, 0, 0.7);
            }
        }

        /* 减少动画模式支持 */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* 帖子详情页面样式 */
        .post-detail-page {
            background: var(--background-secondary);
            min-height: 100vh;
            padding: clamp(1rem, 3vw, 2rem) 0;
        }

        .post-detail-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 clamp(1rem, 4vw, 2rem);
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: clamp(1.5rem, 4vw, 2rem);
        }

        @media (max-width: 768px) {
            .post-detail-container {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }

        /* 返回按钮 */
        .back-navigation {
            grid-column: 1 / -1;
            margin-bottom: clamp(1rem, 2vw, 1.5rem);
        }

        .back-btn {
            background: var(--background-primary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-medium);
            padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
            color: var(--text-primary);
            font-size: clamp(0.875rem, 2vw, 1rem);
            cursor: pointer;
            transition: var(--transition-fast);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .back-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: translateX(-2px);
        }

        /* 响应式布局优化 */
        @media (max-width: 768px) {
            .post-detail-container {
                max-width: 100%;
                padding: 0 clamp(1rem, 4vw, 1.5rem);
            }

            .post-actions {
                grid-template-columns: repeat(2, 1fr);
                gap: clamp(0.75rem, 2vw, 1rem);
            }

            .author-card {
                padding: clamp(1rem, 3vw, 1.5rem);
            }

            .comment-compose {
                flex-direction: column;
                gap: clamp(1rem, 3vw, 1.5rem);
            }

            .comment-avatar {
                align-self: flex-start;
            }

            .related-posts-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .post-detail-page {
                padding: clamp(0.5rem, 2vw, 1rem) 0;
            }

            .post-actions {
                grid-template-columns: 1fr;
            }

            .post-actions .btn {
                justify-content: center;
            }

            .comment-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .image-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .placeholder-image {
                font-size: 1rem;
                padding: 1rem;
            }

            .sort-select {
                width: 100%;
            }
        }

        /* 帖子主体内容 */
        .post-content {
            background: var(--background-primary);
            border-radius: var(--border-radius-large);
            padding: clamp(1.5rem, 4vw, 2rem);
            box-shadow: var(--shadow-light);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* 帖子头部 */
        .post-header {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: clamp(1rem, 3vw, 1.5rem);
            margin-bottom: clamp(1.5rem, 4vw, 2rem);
        }

        .post-title {
            font-size: clamp(1.25rem, 4vw, 1.75rem);
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: clamp(1rem, 3vw, 1.5rem);
            line-height: 1.3;
        }

        .post-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .author-info {
            display: flex;
            align-items: center;
            gap: clamp(0.75rem, 2vw, 1rem);
        }

        .author-avatar {
            width: clamp(2.5rem, 6vw, 3rem);
            height: clamp(2.5rem, 6vw, 3rem);
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: clamp(0.875rem, 2.5vw, 1.125rem);
        }

        .author-details {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .author-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: clamp(0.875rem, 2.5vw, 1rem);
        }

        .author-level {
            font-size: clamp(0.75rem, 2vw, 0.875rem);
            color: var(--text-secondary);
        }

        .post-stats {
            display: flex;
            gap: clamp(1rem, 3vw, 1.5rem);
            font-size: clamp(0.75rem, 2vw, 0.875rem);
            color: var(--text-secondary);
        }

        /* 帖子正文 */
        .post-body {
            line-height: 1.7;
        }

        .post-text {
            margin-bottom: clamp(1.5rem, 4vw, 2rem);
        }

        .post-text h3 {
            font-size: clamp(1rem, 3vw, 1.25rem);
            font-weight: 600;
            color: var(--text-primary);
            margin: clamp(1.5rem, 4vw, 2rem) 0 clamp(0.75rem, 2vw, 1rem) 0;
        }

        .post-text p {
            margin-bottom: clamp(1rem, 3vw, 1.25rem);
            color: var(--text-primary);
            font-size: clamp(0.875rem, 2.5vw, 1rem);
        }

        .post-text ul {
            margin: clamp(1rem, 3vw, 1.25rem) 0;
            padding-left: clamp(1.5rem, 4vw, 2rem);
        }

        .post-text li {
            margin-bottom: 0.5rem;
            color: var(--text-primary);
        }

        .post-text blockquote {
            background: rgba(var(--primary-color), 0.1);
            border-left: 4px solid var(--primary-color);
            padding: clamp(1rem, 3vw, 1.5rem);
            margin: clamp(1.5rem, 4vw, 2rem) 0;
            border-radius: var(--border-radius-small);
            font-style: italic;
            color: var(--text-primary);
        }

        /* 图片展示区域 */
        .post-images {
            margin: clamp(2rem, 5vw, 3rem) 0;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
            gap: clamp(1rem, 2.5vw, 1.5rem);
            margin: 0;
        }

        .image-item {
            border-radius: var(--border-radius-medium);
            overflow: hidden;
            aspect-ratio: 16/9;
            background: #ffffff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .image-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        .placeholder-image {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(1rem, 2.5vw, 1.25rem);
            font-weight: 500;
            color: #495057;
            border: 2px solid #dee2e6;
            border-radius: var(--border-radius-medium);
            transition: all 0.3s ease;
            text-align: center;
            line-height: 1.4;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .placeholder-image:hover {
            background: linear-gradient(135deg, #e9ecef, #dee2e6);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* 帖子互动按钮 */
        .post-actions {
            display: flex;
            gap: clamp(0.75rem, 2vw, 1rem);
            margin-top: clamp(2rem, 5vw, 3rem);
            padding-top: clamp(1.5rem, 4vw, 2rem);
            border-top: 1px solid var(--border-color);
            flex-wrap: wrap;
        }

        .action-btn {
            background: var(--background-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-medium);
            padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(1rem, 3vw, 1.25rem);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: var(--transition-fast);
            font-size: clamp(0.75rem, 2vw, 0.875rem);
            min-height: 44px;
        }

        .action-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-1px);
            box-shadow: var(--shadow-medium);
        }

        .action-btn.like-btn.active {
            background: var(--primary-color);
            color: white;
        }

        /* 作者信息卡片 */
        .author-card {
            background: var(--background-primary);
            border-radius: var(--border-radius-large);
            padding: clamp(1.5rem, 4vw, 2rem);
            box-shadow: var(--shadow-light);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            height: fit-content;
            position: sticky;
            top: clamp(1rem, 3vw, 2rem);
        }

        @media (max-width: 768px) {
            .author-card {
                position: static;
                order: -1;
            }
        }

        .author-card-header {
            display: flex;
            gap: clamp(1rem, 3vw, 1.5rem);
            margin-bottom: clamp(1.5rem, 4vw, 2rem);
        }

        .author-avatar-large {
            width: clamp(3rem, 8vw, 4rem);
            height: clamp(3rem, 8vw, 4rem);
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: clamp(1.25rem, 4vw, 1.5rem);
            flex-shrink: 0;
        }

        .author-info-detailed h3 {
            font-size: clamp(1rem, 3vw, 1.25rem);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .author-title {
            color: var(--text-secondary);
            font-size: clamp(0.75rem, 2vw, 0.875rem);
            margin-bottom: clamp(0.75rem, 2vw, 1rem);
        }

        .author-stats {
            display: flex;
            gap: clamp(1rem, 3vw, 1.5rem);
            font-size: clamp(0.75rem, 2vw, 0.875rem);
            color: var(--text-secondary);
        }

        .author-actions {
            display: flex;
            gap: clamp(0.75rem, 2vw, 1rem);
        }

        .author-actions .btn {
            flex: 1;
            justify-content: center;
            min-height: 44px;
        }

        /* 导航标签 */
        .profile-tabs {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: var(--shadow-light);
        }

        .tabs-container {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .tab-item {
            flex: 1;
            text-align: center;
        }

        /* 评论系统样式 */
        .comments-section {
            grid-column: 1 / -1;
            background: var(--background-primary);
            border-radius: var(--border-radius-large);
            padding: clamp(1.5rem, 4vw, 2rem);
            box-shadow: var(--shadow-light);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin-top: clamp(1.5rem, 4vw, 2rem);
        }

        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: clamp(1.5rem, 4vw, 2rem);
            flex-wrap: wrap;
            gap: 1rem;
        }

        .comments-header h2 {
            font-size: clamp(1.125rem, 3vw, 1.5rem);
            font-weight: 600;
            color: var(--text-primary);
        }

        .sort-select {
            background: var(--background-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-small);
            padding: 0.5rem 1rem;
            font-size: clamp(0.75rem, 2vw, 0.875rem);
            color: var(--text-primary);
        }

        /* 评论发布框 */
        .comment-compose {
            display: flex;
            gap: clamp(0.75rem, 2vw, 1rem);
            margin-bottom: clamp(2rem, 5vw, 3rem);
            padding-bottom: clamp(1.5rem, 4vw, 2rem);
            border-bottom: 1px solid var(--border-color);
        }

        .comment-avatar {
            width: clamp(2.5rem, 6vw, 3rem);
            height: clamp(2.5rem, 6vw, 3rem);
            border-radius: 50%;
            background: linear-gradient(135deg, var(--success-color), var(--primary-color));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: clamp(0.875rem, 2.5vw, 1.125rem);
            flex-shrink: 0;
        }

        .comment-input-area {
            flex: 1;
        }

        .comment-input {
            width: 100%;
            min-height: clamp(4rem, 10vw, 6rem);
            background: var(--background-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-medium);
            padding: clamp(0.75rem, 2vw, 1rem);
            font-size: clamp(0.875rem, 2.5vw, 1rem);
            color: var(--text-primary);
            resize: vertical;
            font-family: inherit;
            line-height: 1.5;
        }

        .comment-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.2);
        }

        .comment-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: clamp(0.75rem, 2vw, 1rem);
            flex-wrap: wrap;
            gap: 1rem;
        }

        .comment-tools {
            display: flex;
            gap: 0.5rem;
        }

        .tool-btn {
            background: var(--background-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-small);
            padding: 0.5rem;
            cursor: pointer;
            transition: var(--transition-fast);
            font-size: 1rem;
            min-height: 44px;
            min-width: 44px;
        }

        .tool-btn:hover {
            background: var(--primary-color);
            color: white;
        }

        .comment-submit {
            min-height: 44px;
        }

        /* 评论列表 */
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: clamp(1.5rem, 4vw, 2rem);
        }

        .comment-item {
            display: flex;
            gap: clamp(0.75rem, 2vw, 1rem);
            padding: clamp(1rem, 3vw, 1.5rem);
            background: rgba(var(--background-secondary), 0.5);
            border-radius: var(--border-radius-medium);
            border: 1px solid rgba(var(--border-color), 0.5);
        }

        .comment-content {
            flex: 1;
        }

        .comment-header {
            display: flex;
            align-items: center;
            gap: clamp(0.75rem, 2vw, 1rem);
            margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
            flex-wrap: wrap;
        }

        .commenter-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: clamp(0.875rem, 2.5vw, 1rem);
        }

        .comment-time {
            color: var(--text-secondary);
            font-size: clamp(0.75rem, 2vw, 0.875rem);
        }

        .comment-text {
            color: var(--text-primary);
            line-height: 1.6;
            margin-bottom: clamp(0.75rem, 2vw, 1rem);
            font-size: clamp(0.875rem, 2.5vw, 1rem);
        }

        .comment-actions {
            display: flex;
            gap: clamp(1rem, 3vw, 1.5rem);
        }

        .comment-action-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: clamp(0.75rem, 2vw, 0.875rem);
            transition: var(--transition-fast);
            padding: 0.25rem 0.5rem;
            border-radius: var(--border-radius-small);
            min-height: 32px;
        }

        .comment-action-btn:hover {
            color: var(--primary-color);
            background: rgba(var(--primary-color), 0.1);
        }

        /* 回复样式 */
        .replies {
            margin-top: clamp(1rem, 3vw, 1.5rem);
            padding-left: clamp(1rem, 3vw, 1.5rem);
            border-left: 2px solid var(--border-color);
        }

        .reply-item {
            display: flex;
            gap: clamp(0.5rem, 1.5vw, 0.75rem);
            margin-bottom: clamp(0.75rem, 2vw, 1rem);
        }

        .reply-avatar {
            width: clamp(1.5rem, 4vw, 2rem);
            height: clamp(1.5rem, 4vw, 2rem);
            border-radius: 50%;
            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: clamp(0.625rem, 1.5vw, 0.75rem);
            flex-shrink: 0;
        }

        .reply-content {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: baseline;
        }

        .reply-author {
            font-weight: 600;
            color: var(--text-primary);
            font-size: clamp(0.75rem, 2vw, 0.875rem);
        }

        .reply-text {
            color: var(--text-primary);
            font-size: clamp(0.75rem, 2vw, 0.875rem);
        }

        .reply-time {
            color: var(--text-secondary);
            font-size: clamp(0.625rem, 1.5vw, 0.75rem);
            margin-left: auto;
        }

        /* 加载更多评论 */
        .load-more-comments {
            text-align: center;
            margin-top: clamp(2rem, 5vw, 3rem);
        }

        /* 相关推荐 */
        .related-posts {
            grid-column: 1 / -1;
            background: var(--background-primary);
            border-radius: var(--border-radius-large);
            padding: clamp(1.5rem, 4vw, 2rem);
            box-shadow: var(--shadow-light);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin-top: clamp(1.5rem, 4vw, 2rem);
        }

        .related-posts h2 {
            font-size: clamp(1.125rem, 3vw, 1.5rem);
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: clamp(1.5rem, 4vw, 2rem);
        }

        .related-posts-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
            gap: clamp(1rem, 3vw, 1.5rem);
        }

        .related-post-item {
            background: var(--background-secondary);
            border-radius: var(--border-radius-medium);
            padding: clamp(1rem, 3vw, 1.5rem);
            border: 1px solid var(--border-color);
            transition: var(--transition-fast);
            cursor: pointer;
        }

        .related-post-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-medium);
            border-color: var(--primary-color);
        }

        .related-post-title {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
            font-size: clamp(0.875rem, 2.5vw, 1rem);
            line-height: 1.4;
        }

        .related-post-meta {
            display: flex;
            justify-content: space-between;
            color: var(--text-secondary);
            font-size: clamp(0.75rem, 2vw, 0.875rem);
        }

        .tab-link {
            display: block;
            padding: var(--spacing-lg);
            text-decoration: none;
            color: var(--text-secondary);
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            font-weight: 600;
            font-size: 14px;
        }

        .tab-link:hover,
        .tab-link.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            background: rgba(248, 249, 250, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* 内容区域 */
        .profile-content {
            padding: var(--spacing-2xl) var(--spacing-lg);
        }

        .content-section {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: var(--border-radius-lg);
            padding: var(--spacing-xl);
            margin-bottom: var(--spacing-xl);
            box-shadow: var(--shadow-medium);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .content-section:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-heavy);
        }

        .section-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: var(--spacing-lg);
            padding-bottom: var(--spacing-sm);
            border-bottom: 2px solid var(--border-color);
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* 个人信息表单 */
        .info-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--spacing-lg);
        }

        @media (max-width: 768px) {
            .info-form {
                grid-template-columns: 1fr;
            }
        }

        .form-group-full {
            grid-column: 1 / -1;
        }

        /* 帖子管理 */
        .my-posts {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
        }

        .my-post-item {
            display: flex;
            gap: var(--spacing-lg);
            padding: var(--spacing-lg);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-md);
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .my-post-item:hover {
            box-shadow: var(--shadow-medium);
            transform: translateY(-2px);
        }

        .my-post-content {
            flex: 1;
        }

        .my-post-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }

        .my-post-meta {
            color: #999;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .my-post-actions {
            display: flex;
            gap: 10px;
        }

        .btn-small {
            padding: 6px 12px;
            font-size: 12px;
        }

        /* 收藏列表 */
        .favorites-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .favorite-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            transition: all 0.3s;
        }

        .favorite-item:hover {
            background-color: #f8f9fa;
        }

        .favorite-icon {
            color: #ffc107;
            font-size: 20px;
        }

        .favorite-info {
            flex: 1;
        }

        .favorite-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }

        .favorite-meta {
            color: #999;
            font-size: 12px;
        }

        /* 消息通知 */
        .notifications-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .notification-item {
            display: flex;
            gap: 15px;
            padding: 15px;
            border-left: 4px solid #007bff;
            background-color: #f8f9fa;
            border-radius: 0 8px 8px 0;
        }

        .notification-item.unread {
            background-color: #e3f2fd;
            border-left-color: #2196f3;
        }

        .notification-icon {
            color: #007bff;
            font-size: 20px;
            margin-top: 2px;
        }

        .notification-content {
            flex: 1;
        }

        .notification-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }

        .notification-text {
            color: #666;
            font-size: 14px;
            line-height: 1.4;
        }

        .notification-time {
            color: #999;
            font-size: 12px;
            margin-top: 5px;
        }

        /* 页脚样式 */
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 40px 20px 20px;
            margin-top: 60px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
            text-align: left;
        }

        .footer-section h3 {
            margin-bottom: 15px;
            color: #fff;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section li {
            margin-bottom: 8px;
        }

        .footer-section a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-section a:hover {
            color: white;
        }

        .footer-bottom {
            border-top: 1px solid #555;
            padding-top: 20px;
            color: #ccc;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .hero-content h1 {
                font-size: 32px;
            }

            .tieba-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            }

            .posts-table {
                font-size: 14px;
            }

            .posts-table th,
            .posts-table td {
                padding: 10px;
            }

            .profile-info {
                flex-direction: column;
                text-align: center;
            }

            .tabs-container {
                flex-wrap: wrap;
            }

            .tab-link {
                padding: 15px 10px;
                font-size: 14px;
            }
        }

        /* 首页轮播样式 */
        .image-carousel {
            position: relative;
            width: 100%;
            max-width: 1100px;
            margin: clamp(1rem, 4vw, 2rem) auto;
            border-radius: var(--radius-large, 16px);
            overflow: hidden;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: var(--shadow-medium, 0 8px 24px rgba(0,0,0,0.12));
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .image-carousel .carousel-track {
            display: flex;
            transition: transform 0.6s ease;
            will-change: transform;
        }
        .image-carousel .carousel-slide {
            flex: 0 0 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 16 / 9;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            color: var(--text-primary, #333);
            font-size: clamp(1rem, 3vw, 1.5rem);
            font-weight: 600;
        }
        .image-carousel .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .image-carousel .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 999px;
            padding: 10px 14px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.12);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            transition: all 0.2s ease;
            color: #333;
        }
        .image-carousel .carousel-btn:hover {
            transform: translateY(-50%) scale(1.05);
        }
        .image-carousel .carousel-btn.prev { left: 12px; }
        .image-carousel .carousel-btn.next { right: 12px; }
        .image-carousel .carousel-indicators {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }
        .image-carousel .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(0,0,0,0.08);
            transition: all 0.2s ease;
        }
        .image-carousel .dot.active {
            width: 18px;
            border-radius: 999px;
            background: var(--primary-color, #007aff);
        }
        @media (max-width: 600px) {
            .image-carousel .carousel-btn { display: none; }
            .image-carousel { border-radius: var(--radius-medium, 12px); }
        }
    </style>
</head>
<body>

    <!-- 首页 -->
<div class="homepage">
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">百度贴吧</a>
            <button class="nav-toggle" id="navToggle">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul class="nav-links" id="navLinks">
                <li><a href="#home">首页</a></li>
                <li><a href="#tiebas">贴吧</a></li>
                <li><a href="#discover">发现</a></li>
            </ul>
            <div class="nav-user">
                <button class="btn btn-secondary">登录</button>
                <button class="btn btn-primary">注册</button>
            </div>
        </div>
    </nav>

    <!-- 轮播图/推荐区域 -->
    <section class="hero-section">
        <div class="container">
            <div class="hero-content">
                <h1>发现兴趣,分享生活</h1>
                <p>加入千万用户的社区,找到属于你的兴趣圈子</p>
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索贴吧、帖子或用户...">
                    <button class="search-btn">搜索</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 首页轮播 -->
    <section class="image-carousel" aria-label="首页轮播">
        <div class="carousel-track">
            <div class="carousel-slide"><div>精选推荐 1</div></div>
            <div class="carousel-slide"><div>精选推荐 2</div></div>
            <div class="carousel-slide"><div>精选推荐 3</div></div>
        </div>
        <button class="carousel-btn prev" aria-label="上一张">‹</button>
        <button class="carousel-btn next" aria-label="下一张">›</button>
        <div class="carousel-indicators">
            <button class="dot active" aria-label="第1张"></button>
            <button class="dot" aria-label="第2张"></button>
            <button class="dot" aria-label="第3张"></button>
        </div>
    </section>
    <script>
        (function() {
            const carousel = document.querySelector('.image-carousel');
            if (!carousel) return;
            const track = carousel.querySelector('.carousel-track');
            const slides = Array.from(carousel.querySelectorAll('.carousel-slide'));
            const prevBtn = carousel.querySelector('.prev');
            const nextBtn = carousel.querySelector('.next');
            const dots = Array.from(carousel.querySelectorAll('.dot'));

            let index = 0;
            let timer = null;

            function update() {
                track.style.transform = `translateX(-${index * 100}%)`;
                dots.forEach((d, i) => d.classList.toggle('active', i === index));
            }
            function next() {
                index = (index + 1) % slides.length;
                update();
            }
            function prev() {
                index = (index - 1 + slides.length) % slides.length;
                update();
            }
            function autoplay() {
                clearInterval(timer);
                timer = setInterval(next, 4000);
            }

            // Buttons
            prevBtn && prevBtn.addEventListener('click', () => { prev(); autoplay(); });
            nextBtn && nextBtn.addEventListener('click', () => { next(); autoplay(); });

            // Dots
            dots.forEach((dot, i) => {
                dot.addEventListener('click', () => { index = i; update(); autoplay(); });
            });

            // Touch swipe
            let startX = 0; let dx = 0; let dragging = false;
            track.addEventListener('touchstart', (e) => {
                startX = e.touches[0].clientX; dx = 0; dragging = true; clearInterval(timer);
            }, { passive: true });
            track.addEventListener('touchmove', (e) => {
                if (!dragging) return;
                dx = e.touches[0].clientX - startX;
            }, { passive: true });
            track.addEventListener('touchend', () => {
                dragging = false;
                if (Math.abs(dx) > 50) { dx < 0 ? next() : prev(); }
                autoplay();
            });

            // Init
            update();
            autoplay();
        })();
    </script>

    <!-- 主要内容区域 -->
    <div class="container">
        <div class="main-content">
            <!-- 热门贴吧列表 -->
            <div class="hot-tiebas">
                <div class="section-header">
                    <h2 class="section-title">
                        <span class="icon">🔥</span>
                        热门贴吧
                    </h2>
                    <a href="#" style="color: #007bff; text-decoration: none;">查看更多 →</a>
                </div>
                <div class="tieba-grid">
                    <div class="tieba-item">
                        <div class="tieba-avatar">游戏</div>
                        <div class="tieba-name">游戏吧</div>
                        <div class="tieba-members">123万成员</div>
                    </div>
                    <div class="tieba-item">
                        <div class="tieba-avatar">电影</div>
                        <div class="tieba-name">电影吧</div>
                        <div class="tieba-members">98万成员</div>
                    </div>
                    <div class="tieba-item">
                        <div class="tieba-avatar">音乐</div>
                        <div class="tieba-name">音乐吧</div>
                        <div class="tieba-members">87万成员</div>
                    </div>
                    <div class="tieba-item">
                        <div class="tieba-avatar">美食</div>
                        <div class="tieba-name">美食吧</div>
                        <div class="tieba-members">76万成员</div>
                    </div>
                    <div class="tieba-item">
                        <div class="tieba-avatar">旅游</div>
                        <div class="tieba-name">旅游吧</div>
                        <div class="tieba-members">65万成员</div>
                    </div>
                    <div class="tieba-item">
                        <div class="tieba-avatar">科技</div>
                        <div class="tieba-name">科技吧</div>
                        <div class="tieba-members">54万成员</div>
                    </div>
                </div>
            </div>

            <!-- 热门帖子列表 -->
            <div class="hot-posts">
                <div class="section-header">
                    <h2 class="section-title">
                        <span class="icon">💬</span>
                        热门帖子
                    </h2>
                    <a href="#" style="color: #007bff; text-decoration: none;">查看更多 →</a>
                </div>
                <div class="post-list">
                    <div class="post-item" onclick="showPage('post')">
                        <div class="post-header">
                            <div class="post-avatar">张</div>
                            <div class="post-meta">
                                <div class="post-author">张三</div>
                                <div class="post-time">2小时前</div>
                            </div>
                        </div>
                        <div class="post-title">分享一些游戏攻略,新手必看!</div>
                        <div class="post-content">今天给大家分享一些我总结的游戏攻略,希望能帮助到新手玩家。首先是基础操作技巧,然后是进阶策略...</div>
                        <div class="post-stats">
                            <div class="post-stat">
                                <span>👍</span>
                                <span>1.2k</span>
                            </div>
                            <div class="post-stat">
                                <span>💬</span>
                                <span>234</span>
                            </div>
                            <div class="post-stat">
                                <span>👁</span>
                                <span>5.6k</span>
                            </div>
                        </div>
                    </div>

                    <div class="post-item">
                        <div class="post-header">
                            <div class="post-avatar">李</div>
                            <div class="post-meta">
                                <div class="post-author">李四</div>
                                <div class="post-time">4小时前</div>
                            </div>
                        </div>
                        <div class="post-title">推荐几部最近看的好电影</div>
                        <div class="post-content">最近看了几部电影,感觉很不错,推荐给大家。第一部是《流浪地球2》,特效震撼...</div>
                        <div class="post-stats">
                            <div class="post-stat">
                                <span>👍</span>
                                <span>856</span>
                            </div>
                            <div class="post-stat">
                                <span>💬</span>
                                <span>142</span>
                            </div>
                            <div class="post-stat">
                                <span>👁</span>
                                <span>3.2k</span>
                            </div>
                        </div>
                    </div>

                    <div class="post-item">
                        <div class="post-header">
                            <div class="post-avatar">王</div>
                            <div class="post-meta">
                                <div class="post-author">王五</div>
                                <div class="post-time">6小时前</div>
                            </div>
                        </div>
                        <div class="post-title">自制美食教程,简单易学</div>
                        <div class="post-content">今天在家做了几道菜,过程记录下来了,有想学做菜的朋友可以看看...</div>
                        <div class="post-stats">
                            <div class="post-stat">
                                <span>👍</span>
                                <span>642</span>
                            </div>
                            <div class="post-stat">
                                <span>💬</span>
                                <span>89</span>
                            </div>
                            <div class="post-stat">
                                <span>👁</span>
                                <span>2.1k</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 贴吧详情页 -->
<div class="tieba-detail" style="display: none;">
    <!-- 贴吧信息区域 -->
    <div class="tieba-header">
        <div class="container">
            <div class="tieba-info">
                <div class="tieba-main-avatar">游戏</div>
                <div class="tieba-details">
                    <h1>游戏吧</h1>
                    <div class="tieba-description">欢迎来到游戏吧!这里是游戏爱好者的聚集地,分享游戏心得、攻略、资讯的好地方。</div>
                    <div class="tieba-stats">
                        <div class="stat-item">
                            <span>👥</span>
                            <span>123万成员</span>
                        </div>
                        <div class="stat-item">
                            <span>📝</span>
                            <span>5.6万帖子</span>
                        </div>
                        <div class="stat-item">
                            <span>🌡</span>
                            <span>热度值:9.8</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作按钮栏 -->
    <div class="action-bar">
        <div class="container">
            <div class="action-buttons">
                <button class="btn btn-primary">+ 发帖</button>
                <button class="btn btn-secondary">关注贴吧</button>
                <button class="btn btn-secondary">加入会员</button>
            </div>
            <div class="search-bar">
                <input type="text" placeholder="搜索本吧内容...">
                <button class="btn btn-primary">搜索</button>
            </div>
        </div>
    </div>

    <!-- 帖子列表 -->
    <div class="posts-table-container">
        <div class="container">
            <table class="posts-table">
                <thead>
                    <tr>
                        <th>帖子标题</th>
                        <th>作者</th>
                        <th>回复数</th>
                        <th>最后回复时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="post-title-cell">
                            <a href="#" class="post-title-link">【攻略】新手上路必看的游戏技巧</a>
                            <div class="post-tags">
                                <span class="tag">精华</span>
                                <span class="tag">攻略</span>
                            </div>
                        </td>
                        <td>
                            <div style="display: flex; align-items: center; gap: 8px;">
                                <div style="width: 24px; height: 24px; border-radius: 50%; background: #007bff; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">张</div>
                                张三
                            </div>
                        </td>
                        <td>234</td>
                        <td>2024-01-15 14:30</td>
                    </tr>
                    <tr>
                        <td class="post-title-cell">
                            <a href="#" class="post-title-link">【讨论】这款游戏的剧情你怎么看?</a>
                            <div class="post-tags">
                                <span class="tag">讨论</span>
                            </div>
                        </td>
                        <td>
                            <div style="display: flex; align-items: center; gap: 8px;">
                                <div style="width: 24px; height: 24px; border-radius: 50%; background: #28a745; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">李</div>
                                李四
                            </div>
                        </td>
                        <td>156</td>
                        <td>2024-01-15 13:45</td>
                    </tr>
                    <tr>
                        <td class="post-title-cell">
                            <a href="#" class="post-title-link">【求助】BOSS战打不过,求攻略</a>
                            <div class="post-tags">
                                <span class="tag">求助</span>
                            </div>
                        </td>
                        <td>
                            <div style="display: flex; align-items: center; gap: 8px;">
                                <div style="width: 24px; height: 24px; border-radius: 50%; background: #ffc107; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">王</div>
                                王五
                            </div>
                        </td>
                        <td>89</td>
                        <td>2024-01-15 12:20</td>
                    </tr>
                    <tr>
                        <td class="post-title-cell">
                            <a href="#" class="post-title-link">【分享】我的游戏截图合集</a>
                            <div class="post-tags">
                                <span class="tag">分享</span>
                                <span class="tag">图片</span>
                            </div>
                        </td>
                        <td>
                            <div style="display: flex; align-items: center; gap: 8px;">
                                <div style="width: 24px; height: 24px; border-radius: 50%; background: #dc3545; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">赵</div>
                                赵六
                            </div>
                        </td>
                        <td>67</td>
                        <td>2024-01-15 11:15</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 帖子详情页面 -->
<div class="post-detail-page" style="display: none;">
    <div class="post-detail-container">
        <!-- 返回按钮 -->
        <div class="back-navigation">
            <button class="back-btn" onclick="showPage('tieba')">
                <span>←</span> 返回贴吧
            </button>
        </div>

        <!-- 帖子主体内容 -->
        <article class="post-content">
            <!-- 帖子头部信息 -->
            <header class="post-header">
                <h1 class="post-title">【攻略】新手上路必看的游戏技巧 - 从零开始的游戏之路</h1>
                <div class="post-meta">
                    <div class="author-info">
                        <div class="author-avatar">张</div>
                        <div class="author-details">
                            <span class="author-name">张三</span>
                            <span class="author-level">Lv.15</span>
                        </div>
                    </div>
                    <div class="post-stats">
                        <span class="post-time">2024-01-15 14:30</span>
                        <span class="post-views">👁 1.2万</span>
                        <span class="post-replies">💬 234</span>
                    </div>
                </div>
            </header>

            <!-- 帖子正文 -->
            <div class="post-body">
                <div class="post-text">
                    <p>大家好！作为一个游戏老玩家，今天想和新手朋友们分享一些实用的游戏技巧。希望能帮助大家更快地上手，享受游戏的乐趣。</p>
                    
                    <h3>🎮 基础操作技巧</h3>
                    <p>首先，熟悉基本操作是最重要的。建议新手玩家先在训练模式中练习基本操作，包括移动、攻击、防御等。不要急于进入正式游戏，打好基础很重要。</p>
                    
                    <h3>⚔️ 战斗系统详解</h3>
                    <p>游戏的战斗系统相对复杂，需要掌握时机和策略。记住以下几点：</p>
                    <ul>
                        <li>观察敌人的攻击模式</li>
                        <li>合理使用技能冷却时间</li>
                        <li>保持血量和蓝量的平衡</li>
                        <li>学会走位和预判</li>
                    </ul>
                </div>

                <!-- 图片展示区域 -->
                <div class="post-images">
                    <div class="image-grid">
                        <div class="image-item">
                            <div class="placeholder-image">🎮 游戏截图1</div>
                        </div>
                        <div class="image-item">
                            <div class="placeholder-image">📊 数据分析</div>
                        </div>
                        <div class="image-item">
                            <div class="placeholder-image">🗺️ 地图攻略</div>
                        </div>
                        <div class="image-item">
                            <div class="placeholder-image">⚡ 技能展示</div>
                        </div>
                    </div>
                </div>

                <div class="post-text">
                    <h3>💡 进阶技巧</h3>
                    <p>当你掌握了基础操作后，可以尝试一些进阶技巧：</p>
                    <blockquote>
                        "游戏不仅仅是技术，更重要的是策略和心态。保持冷静，享受过程。"
                    </blockquote>
                    <p>希望这些技巧对大家有帮助！如果有任何问题，欢迎在评论区讨论。</p>
                </div>
            </div>

            <!-- 帖子互动按钮 -->
            <div class="post-actions">
                <button class="action-btn like-btn">
                    <span class="icon">👍</span>
                    <span class="text">点赞</span>
                    <span class="count">156</span>
                </button>
                <button class="action-btn comment-btn">
                    <span class="icon">💬</span>
                    <span class="text">评论</span>
                    <span class="count">234</span>
                </button>
                <button class="action-btn share-btn">
                    <span class="icon">📤</span>
                    <span class="text">分享</span>
                </button>
                <button class="action-btn collect-btn">
                    <span class="icon">⭐</span>
                    <span class="text">收藏</span>
                </button>
            </div>
        </article>

        <!-- 作者信息卡片 -->
        <aside class="author-card">
            <div class="author-card-header">
                <div class="author-avatar-large">张</div>
                <div class="author-info-detailed">
                    <h3 class="author-name">张三</h3>
                    <p class="author-title">游戏达人 · Lv.15</p>
                    <div class="author-stats">
                        <span>📝 发帖 128</span>
                        <span>👍 获赞 2.3k</span>
                    </div>
                </div>
            </div>
            <div class="author-actions">
                <button class="btn btn-primary">关注</button>
                <button class="btn btn-secondary">私信</button>
            </div>
        </aside>

        <!-- 评论系统 -->
        <section class="comments-section">
            <div class="comments-header">
                <h2>评论 (234)</h2>
                <div class="comment-sort">
                    <select class="sort-select">
                        <option>按时间排序</option>
                        <option>按热度排序</option>
                    </select>
                </div>
            </div>

            <!-- 评论发布框 -->
            <div class="comment-compose">
                <div class="comment-avatar">我</div>
                <div class="comment-input-area">
                    <textarea class="comment-input" placeholder="写下你的评论..."></textarea>
                    <div class="comment-actions">
                        <div class="comment-tools">
                            <button class="tool-btn">😊</button>
                            <button class="tool-btn">📷</button>
                        </div>
                        <button class="btn btn-primary comment-submit">发布评论</button>
                    </div>
                </div>
            </div>

            <!-- 评论列表 -->
            <div class="comments-list">
                <!-- 评论项 1 -->
                <div class="comment-item">
                    <div class="comment-avatar">李</div>
                    <div class="comment-content">
                        <div class="comment-header">
                            <span class="commenter-name">李四</span>
                            <span class="comment-time">2小时前</span>
                        </div>
                        <div class="comment-text">
                            非常实用的攻略！特别是战斗系统的部分，对新手很有帮助。我按照你的方法练习了一下，确实有很大提升。
                        </div>
                        <div class="comment-actions">
                            <button class="comment-action-btn">👍 12</button>
                            <button class="comment-action-btn">回复</button>
                        </div>
                        
                        <!-- 回复列表 -->
                        <div class="replies">
                            <div class="reply-item">
                                <div class="reply-avatar">张</div>
                                <div class="reply-content">
                                    <span class="reply-author">张三</span>
                                    <span class="reply-text">谢谢支持！继续加油💪</span>
                                    <span class="reply-time">1小时前</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 评论项 2 -->
                <div class="comment-item">
                    <div class="comment-avatar">王</div>
                    <div class="comment-content">
                        <div class="comment-header">
                            <span class="commenter-name">王五</span>
                            <span class="comment-time">3小时前</span>
                        </div>
                        <div class="comment-text">
                            楼主写得很详细！不过我觉得还可以加一些装备搭配的内容，这样就更完整了。
                        </div>
                        <div class="comment-actions">
                            <button class="comment-action-btn">👍 8</button>
                            <button class="comment-action-btn">回复</button>
                        </div>
                    </div>
                </div>

                <!-- 评论项 3 -->
                <div class="comment-item">
                    <div class="comment-avatar">赵</div>
                    <div class="comment-content">
                        <div class="comment-header">
                            <span class="commenter-name">赵六</span>
                            <span class="comment-time">5小时前</span>
                        </div>
                        <div class="comment-text">
                            新手表示很受用！已经收藏了，准备慢慢学习。希望楼主能多分享一些这样的攻略。
                        </div>
                        <div class="comment-actions">
                            <button class="comment-action-btn">👍 15</button>
                            <button class="comment-action-btn">回复</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 加载更多评论 -->
            <div class="load-more-comments">
                <button class="btn btn-secondary">加载更多评论</button>
            </div>
        </section>

        <!-- 相关推荐 -->
        <section class="related-posts">
            <h2>相关推荐</h2>
            <div class="related-posts-grid">
                <div class="related-post-item">
                    <div class="related-post-title">【讨论】这款游戏的剧情你怎么看?</div>
                    <div class="related-post-meta">
                        <span>李四</span>
                        <span>156回复</span>
                    </div>
                </div>
                <div class="related-post-item">
                    <div class="related-post-title">【求助】BOSS战打不过,求攻略</div>
                    <div class="related-post-meta">
                        <span>王五</span>
                        <span>89回复</span>
                    </div>
                </div>
                <div class="related-post-item">
                    <div class="related-post-title">【分享】我的游戏心得体会</div>
                    <div class="related-post-meta">
                        <span>赵六</span>
                        <span>67回复</span>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<!-- 发帖页面 -->
<div class="create-post-page" style="display: none;">
    <div class="create-post-container">
        <h1 class="page-title">发布新帖</h1>

        <form>
            <!-- 标题输入框 -->
            <div class="form-group">
                <label class="form-label">帖子标题 *</label>
                <input type="text" class="form-input" placeholder="请输入帖子标题(5-50字)">
            </div>

            <!-- 贴吧分类选择 -->
            <div class="form-group">
                <label class="form-label">选择贴吧 *</label>
                <select class="form-select">
                    <option value="">请选择贴吧</option>
                    <option value="game">游戏吧</option>
                    <option value="movie">电影吧</option>
                    <option value="music">音乐吧</option>
                    <option value="food">美食吧</option>
                    <option value="travel">旅游吧</option>
                    <option value="tech">科技吧</option>
                </select>
            </div>

            <!-- 富文本编辑器 -->
            <div class="form-group">
                <label class="form-label">帖子内容 *</label>
                <div class="editor-container">
                    <div class="editor-toolbar">
                        <button type="button" class="editor-btn">B</button>
                        <button type="button" class="editor-btn"><em>I</em></button>
                        <button type="button" class="editor-btn"><u>U</u></button>
                        <button type="button" class="editor-btn">H1</button>
                        <button type="button" class="editor-btn">H2</button>
                        <button type="button" class="editor-btn">•</button>
                        <button type="button" class="editor-btn">1.</button>
                        <button type="button" class="editor-btn">"</button>
                        <button type="button" class="editor-btn">🔗</button>
                        <button type="button" class="editor-btn">🖼</button>
                        <button type="button" class="editor-btn">😊</button>
                    </div>
                    <div class="editor-content" contenteditable="true" placeholder="请输入帖子内容..."></div>
                </div>
            </div>

            <!-- 图片上传区域 -->
            <div class="form-group">
                <label class="form-label">图片上传</label>
                <div class="image-upload-area">
                    <div class="upload-icon">📁</div>
                    <div class="upload-text">点击或拖拽图片到此处上传</div>
                    <div class="upload-hint">支持 JPG、PNG、GIF 格式,单个文件不超过 5MB,最多上传 9 张图片</div>
                </div>
            </div>

            <!-- 表情选择器 -->
            <div class="form-group">
                <label class="form-label">表情</label>
                <div class="emoji-selector">
                    <div class="emoji-item">😀</div>
                    <div class="emoji-item">😃</div>
                    <div class="emoji-item">😄</div>
                    <div class="emoji-item">😁</div>
                    <div class="emoji-item">😅</div>
                    <div class="emoji-item">😂</div>
                    <div class="emoji-item">🤣</div>
                    <div class="emoji-item">😊</div>
                    <div class="emoji-item">😇</div>
                    <div class="emoji-item">🙂</div>
                    <div class="emoji-item">😉</div>
                    <div class="emoji-item">😌</div>
                    <div class="emoji-item">😍</div>
                    <div class="emoji-item">🥰</div>
                    <div class="emoji-item">😘</div>
                    <div class="emoji-item">😗</div>
                    <div class="emoji-item">😙</div>
                    <div class="emoji-item">😚</div>
                    <div class="emoji-item">😋</div>
                    <div class="emoji-item">😛</div>
                    <div class="emoji-item">😜</div>
                    <div class="emoji-item">🤪</div>
                    <div class="emoji-item">😝</div>
                    <div class="emoji-item">🤗</div>
                    <div class="emoji-item">🤭</div>
                    <div class="emoji-item">🤫</div>
                    <div class="emoji-item">🤔</div>
                    <div class="emoji-item">🤐</div>
                    <div class="emoji-item">🤨</div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="form-actions">
                <button type="button" class="btn btn-secondary btn-large">存为草稿</button>
                <button type="button" class="btn btn-secondary btn-large">预览</button>
                <button type="submit" class="btn btn-primary btn-large">发布帖子</button>
            </div>
        </form>
    </div>
</div>

<!-- 用户个人中心 -->
<div class="user-profile" style="display: none;">
    <!-- 个人信息头部 -->
    <div class="profile-header">
        <div class="container">
            <div class="profile-info">
                <div class="profile-avatar">张</div>
                <div class="profile-details">
                    <h1>张三</h1>
                    <div class="profile-bio">热爱游戏、电影、美食的普通用户,喜欢分享生活中的点点滴滴。</div>
                    <div class="profile-stats">
                        <div class="stat-item">
                            <span>📝</span>
                            <span>128篇帖子</span>
                        </div>
                        <div class="stat-item">
                            <span>⭐</span>
                            <span>456个收藏</span>
                        </div>
                        <div class="stat-item">
                            <span>👥</span>
                            <span>1.2k粉丝</span>
                        </div>
                        <div class="stat-item">
                            <span>🔔</span>
                            <span>23条未读消息</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航标签 -->
    <div class="profile-tabs">
        <div class="container">
            <ul class="tabs-container">
                <li class="tab-item">
                    <a href="#" class="tab-link active">个人信息</a>
                </li>
                <li class="tab-item">
                    <a href="#" class="tab-link">我的帖子</a>
                </li>
                <li class="tab-item">
                    <a href="#" class="tab-link">我的收藏</a>
                </li>
                <li class="tab-item">
                    <a href="#" class="tab-link">消息通知</a>
                </li>
                <li class="tab-item">
                    <a href="#" class="tab-link">设置</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="profile-content">
        <div class="container">
            <!-- 个人信息展示区 -->
            <div class="content-section">
                <h2 class="section-title">个人信息</h2>
                <form class="info-form">
                    <div class="form-group">
                        <label class="form-label">用户名</label>
                        <input type="text" class="form-input" value="张三" readonly>
                    </div>
                    <div class="form-group">
                        <label class="form-label">昵称</label>
                        <input type="text" class="form-input" value="张三">
                    </div>
                    <div class="form-group">
                        <label class="form-label">邮箱</label>
                        <input type="email" class="form-input" value="zhangsan@example.com">
                    </div>
                    <div class="form-group">
                        <label class="form-label">手机号</label>
                        <input type="tel" class="form-input" value="138****5678">
                    </div>
                    <div class="form-group">
                        <label class="form-label">性别</label>
                        <select class="form-select">
                            <option value="male" selected>男</option>
                            <option value="female">女</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">生日</label>
                        <input type="date" class="form-input" value="1995-06-15">
                    </div>
                    <div class="form-group form-group-full">
                        <label class="form-label">个人简介</label>
                        <textarea class="form-input" rows="4">热爱游戏、电影、美食的普通用户,喜欢分享生活中的点点滴滴。</textarea>
                    </div>
                    <div class="form-group form-group-full">
                        <button type="submit" class="btn btn-primary btn-large">保存修改</button>
                    </div>
                </form>
            </div>

            <!-- 我的帖子管理 -->
            <div class="content-section">
                <h2 class="section-title">我的帖子</h2>
                <div class="my-posts">
                    <div class="my-post-item">
                        <div class="my-post-content">
                            <div class="my-post-title">【攻略】新手上路必看的游戏技巧</div>
                            <div class="my-post-meta">
                                发布于 游戏吧 · 2024-01-15 14:30 · 浏览 5.6k · 回复 234
                            </div>
                            <div class="my-post-actions">
                                <button class="btn btn-primary btn-small">编辑</button>
                                <button class="btn btn-secondary btn-small">置顶</button>
                                <button class="btn btn-secondary btn-small">精华</button>
                                <button class="btn btn-secondary btn-small">删除</button>
                            </div>
                        </div>
                    </div>

                    <div class="my-post-item">
                        <div class="my-post-content">
                            <div class="my-post-title">【分享】自制美食教程,简单易学</div>
                            <div class="my-post-meta">
                                发布于 美食吧 · 2024-01-14 18:45 · 浏览 2.1k · 回复 89
                            </div>
                            <div class="my-post-actions">
                                <button class="btn btn-primary btn-small">编辑</button>
                                <button class="btn btn-secondary btn-small">置顶</button>
                                <button class="btn btn-secondary btn-small">精华</button>
                                <button class="btn btn-secondary btn-small">删除</button>
                            </div>
                        </div>
                    </div>

                    <div class="my-post-item">
                        <div class="my-post-content">
                            <div class="my-post-title">【讨论】这款游戏的剧情你怎么看?</div>
                            <div class="my-post-meta">
                                发布于 游戏吧 · 2024-01-13 22:15 · 浏览 3.2k · 回复 156
                            </div>
                            <div class="my-post-actions">
                                <button class="btn btn-primary btn-small">编辑</button>
                                <button class="btn btn-secondary btn-small">置顶</button>
                                <button class="btn btn-secondary btn-small">精华</button>
                                <button class="btn btn-secondary btn-small">删除</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 我的收藏列表 -->
            <div class="content-section">
                <h2 class="section-title">我的收藏</h2>
                <div class="favorites-list">
                    <div class="favorite-item">
                        <div class="favorite-icon">⭐</div>
                        <div class="favorite-info">
                            <div class="favorite-title">【攻略】新手上路必看的游戏技巧</div>
                            <div class="favorite-meta">游戏吧 · 张三 · 2024-01-15 收藏</div>
                        </div>
                    </div>

                    <div class="favorite-item">
                        <div class="favorite-icon">⭐</div>
                        <div class="favorite-info">
                            <div class="favorite-title">推荐几部最近看的好电影</div>
                            <div class="favorite-meta">电影吧 · 李四 · 2024-01-14 收藏</div>
                        </div>
                    </div>

                    <div class="favorite-item">
                        <div class="favorite-icon">⭐</div>
                        <div class="favorite-info">
                            <div class="favorite-title">【教程】自制美食教程,简单易学</div>
                            <div class="favorite-meta">美食吧 · 王五 · 2024-01-13 收藏</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 消息通知中心 -->
            <div class="content-section">
                <h2 class="section-title">消息通知</h2>
                <div class="notifications-list">
                    <div class="notification-item unread">
                        <div class="notification-icon">🔔</div>
                        <div class="notification-content">
                            <div class="notification-title">新回复通知</div>
                            <div class="notification-text">用户"李四"回复了你的帖子:"这个攻略很有用,谢谢分享!"</div>
                            <div class="notification-time">10分钟前</div>
                        </div>
                    </div>

                    <div class="notification-item unread">
                        <div class="notification-icon">💬</div>
                        <div class="notification-content">
                            <div class="notification-title">新私信</div>
                            <div class="notification-text">用户"王五"给你发送了一条私信:"你好,能分享一下游戏配置吗?"</div>
                            <div class="notification-time">1小时前</div>
                        </div>
                    </div>

                    <div class="notification-item unread">
                        <div class="notification-icon">⭐</div>
                        <div class="notification-content">
                            <div class="notification-title">获赞通知</div>
                            <div class="notification-text">你的帖子"【分享】自制美食教程"获得了100个赞</div>
                            <div class="notification-time">2小时前</div>
                        </div>
                    </div>

                    <div class="notification-item">
                        <div class="notification-icon">📢</div>
                        <div class="notification-content">
                            <div class="notification-title">系统通知</div>
                            <div class="notification-text">你的帖子"【攻略】新手上路必看的游戏技巧"已被设为精华帖子</div>
                            <div class="notification-time">昨天</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设置选项 -->
            <div class="content-section">
                <h2 class="section-title">设置</h2>
                <form class="info-form">
                    <div class="form-group">
                        <label class="form-label">修改密码</label>
                        <input type="password" class="form-input" placeholder="输入当前密码">
                    </div>
                    <div class="form-group">
                        <label class="form-label">新密码</label>
                        <input type="password" class="form-input" placeholder="输入新密码">
                    </div>
                    <div class="form-group">
                        <label class="form-label">确认新密码</label>
                        <input type="password" class="form-input" placeholder="再次输入新密码">
                    </div>

                    <div class="form-group">
                        <label class="form-label">消息通知设置</label>
                        <div style="display: flex; flex-direction: column; gap: 10px;">
                            <label style="display: flex; align-items: center; gap: 8px;">
                                <input type="checkbox" checked> 接收回复通知
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px;">
                                <input type="checkbox" checked> 接收私信通知
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px;">
                                <input type="checkbox" checked> 接获赞通知
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px;">
                                <input type="checkbox"> 接收系统公告
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">隐私设置</label>
                        <div style="display: flex; flex-direction: column; gap: 10px;">
                            <label style="display: flex; align-items: center; gap: 8px;">
                                <input type="checkbox" checked> 允许其他用户查看我的帖子
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px;">
                                <input type="checkbox" checked> 允许其他用户给我发私信
                            </label>
                            <label style="display: flex; align-items: center; gap: 8px;">
                                <input type="checkbox"> 隐藏我的在线状态
                            </label>
                        </div>
                    </div>

                    <div class="form-group form-group-full">
                        <button type="submit" class="btn btn-primary btn-large">保存设置</button>
                        <button type="button" class="btn btn-secondary btn-large">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 页脚信息 -->
<footer class="footer">
    <div class="footer-content">
        <div class="footer-section">
            <h3>关于贴吧</h3>
            <ul>
                <li><a href="#">贴吧简介</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">加入我们</a></li>
                <li><a href="#">贴吧协议</a></li>
            </ul>
        </div>
        <div class="footer-section">
            <h3>帮助中心</h3>
            <ul>
                <li><a href="#">新手指南</a></li>
                <li><a href="#">贴吧规则</a></li>
                <li><a href="#">投诉建议</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
        </div>
        <div class="footer-section">
            <h3>商务合作</h3>
            <ul>
                <li><a href="#">广告投放</a></li>
                <li><a href="#">品牌合作</a></li>
                <li><a href="#">内容合作</a></li>
                <li><a href="#">技术支持</a></li>
            </ul>
        </div>
        <div class="footer-section">
            <h3>关注我们</h3>
            <ul>
                <li><a href="#">微信公众号</a></li>
                <li><a href="#">新浪微博</a></li>
                <li><a href="#">QQ群</a></li>
                <li><a href="#">贴吧APP</a></li>
            </ul>
        </div>
    </div>
    <div class="footer-bottom">
        <p>&copy; 2024 百度贴吧毕业设计项目. All rights reserved. | 技术支持:Veaury + Django</p>
    </div>
</footer>

<script>
// 移动端导航菜单切换
const navToggle = document.getElementById('navToggle');
const navLinks = document.getElementById('navLinks');

navToggle.addEventListener('click', function() {
    navToggle.classList.toggle('active');
    navLinks.classList.toggle('active');
});

// 点击导航链接时关闭移动端菜单
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', function() {
        navToggle.classList.remove('active');
        navLinks.classList.remove('active');
    });
});

// 点击页面其他地方关闭移动端菜单
document.addEventListener('click', function(e) {
    if (!navToggle.contains(e.target) && !navLinks.contains(e.target)) {
        navToggle.classList.remove('active');
        navLinks.classList.remove('active');
    }
});

// 页面切换功能
function showPage(pageName) {
    console.log('切换到页面:', pageName); // 添加调试日志
    
    // 隐藏所有页面
    document.querySelector('.homepage').style.display = 'none';
    document.querySelector('.tieba-detail').style.display = 'none';
    document.querySelector('.create-post-page').style.display = 'none';
    document.querySelector('.user-profile').style.display = 'none';
    
    // 隐藏帖子详情页面
    const postDetailPage = document.querySelector('.post-detail-page');
    if (postDetailPage) {
        postDetailPage.style.display = 'none';
    }

    // 显示指定页面
    switch(pageName) {
        case 'home':
            document.querySelector('.homepage').style.display = 'block';
            break;
        case 'tieba':
            document.querySelector('.tieba-detail').style.display = 'block';
            break;
        case 'create':
            document.querySelector('.create-post-page').style.display = 'block';
            break;
        case 'profile':
            document.querySelector('.user-profile').style.display = 'block';
            break;
        case 'post':
            if (postDetailPage) {
                postDetailPage.style.display = 'block';
                console.log('帖子详情页面已显示'); // 添加调试日志
            } else {
                console.error('找不到帖子详情页面元素');
            }
            break;
        default:
            console.warn('未知页面:', pageName);
            break;
    }
}

// 个人中心标签切换
document.querySelectorAll('.tab-link').forEach(tab => {
    tab.addEventListener('click', function(e) {
        e.preventDefault();

        // 移除所有active类
        document.querySelectorAll('.tab-link').forEach(t => t.classList.remove('active'));

        // 添加active类到当前标签
        this.classList.add('active');
    });
});

// 搜索功能
document.querySelector('.search-btn').addEventListener('click', function() {
    const searchValue = document.querySelector('.search-input').value;
    if(searchValue.trim()) {
        alert('搜索: ' + searchValue);
    }
});

// 发帖功能
document.querySelector('.action-buttons .btn-primary').addEventListener('click', function() {
    showPage('create');
});

// 表情选择器
document.querySelectorAll('.emoji-item').forEach(emoji => {
    emoji.addEventListener('click', function() {
        const editorContent = document.querySelector('.editor-content');
        if(editorContent) {
            editorContent.innerHTML += this.textContent;
        }
    });
});

// 图片上传
document.querySelector('.image-upload-area').addEventListener('click', function() {
    alert('图片上传功能演示');
});

// 为导航链接添加点击事件
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        if(this.textContent === '首页') {
            showPage('home');
        } else if(this.textContent === '贴吧') {
            showPage('tieba');
        }
    });
});

// 为登录/注册按钮添加点击事件
document.querySelectorAll('.nav-user .btn').forEach(btn => {
    btn.addEventListener('click', function() {
        showPage('profile');
    });
});

// 帖子详情页面交互功能
function initPostDetailInteractions() {
    // 返回按钮
    const backBtn = document.querySelector('.back-btn');
    if (backBtn) {
        backBtn.addEventListener('click', function() {
            showPage('tieba');
        });
    }

    // 点赞按钮
    const likeBtn = document.querySelector('.post-actions .btn:first-child');
    if (likeBtn) {
        likeBtn.addEventListener('click', function() {
            const icon = this.querySelector('span');
            const text = this.querySelector('span:last-child');
            if (this.classList.contains('liked')) {
                this.classList.remove('liked');
                this.style.background = '';
                this.style.color = '';
                icon.textContent = '👍';
                text.textContent = '点赞 (128)';
            } else {
                this.classList.add('liked');
                this.style.background = 'var(--primary-color)';
                this.style.color = 'white';
                icon.textContent = '👍';
                text.textContent = '已赞 (129)';
            }
        });
    }

    // 收藏按钮
    const collectBtn = document.querySelector('.post-actions .btn:last-child');
    if (collectBtn) {
        collectBtn.addEventListener('click', function() {
            const icon = this.querySelector('span');
            const text = this.querySelector('span:last-child');
            if (this.classList.contains('collected')) {
                this.classList.remove('collected');
                this.style.background = '';
                this.style.color = '';
                icon.textContent = '⭐';
                text.textContent = '收藏';
            } else {
                this.classList.add('collected');
                this.style.background = 'var(--warning-color)';
                this.style.color = 'white';
                icon.textContent = '⭐';
                text.textContent = '已收藏';
            }
        });
    }

    // 分享按钮
    const shareBtn = document.querySelector('.post-actions .btn:nth-child(3)');
    if (shareBtn) {
        shareBtn.addEventListener('click', function() {
            if (navigator.share) {
                navigator.share({
                    title: '分享帖子',
                    text: '查看这个有趣的帖子',
                    url: window.location.href
                });
            } else {
                alert('分享功能演示 - 复制链接到剪贴板');
            }
        });
    }

    // 评论发布
    const commentSubmit = document.querySelector('.comment-submit');
    const commentInput = document.querySelector('.comment-input');
    if (commentSubmit && commentInput) {
        commentSubmit.addEventListener('click', function() {
            const content = commentInput.value.trim();
            if (content) {
                // 创建新评论元素
                const newComment = createCommentElement('我', content, '刚刚');
                const commentsList = document.querySelector('.comments-list');
                if (commentsList) {
                    commentsList.insertBefore(newComment, commentsList.firstChild);
                }
                commentInput.value = '';
                
                // 更新评论数量
                const commentCount = document.querySelector('.comments-header h2');
                if (commentCount) {
                    const currentCount = parseInt(commentCount.textContent.match(/\d+/)[0]);
                    commentCount.textContent = `评论 (${currentCount + 1})`;
                }
            }
        });
    }

    // 评论工具按钮
    document.querySelectorAll('.tool-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const emoji = this.textContent;
            if (commentInput && emoji) {
                commentInput.value += emoji;
                commentInput.focus();
            }
        });
    });

    // 评论点赞和回复
    document.querySelectorAll('.comment-action-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (this.textContent.includes('点赞')) {
                const currentCount = parseInt(this.textContent.match(/\d+/)[0] || 0);
                if (this.classList.contains('liked')) {
                    this.classList.remove('liked');
                    this.style.color = '';
                    this.textContent = `👍 点赞 (${currentCount - 1})`;
                } else {
                    this.classList.add('liked');
                    this.style.color = 'var(--primary-color)';
                    this.textContent = `👍 点赞 (${currentCount + 1})`;
                }
            } else if (this.textContent.includes('回复')) {
                const replyText = prompt('请输入回复内容:');
                if (replyText) {
                    const commentItem = this.closest('.comment-item');
                    let repliesContainer = commentItem.querySelector('.replies');
                    if (!repliesContainer) {
                        repliesContainer = document.createElement('div');
                        repliesContainer.className = 'replies';
                        commentItem.appendChild(repliesContainer);
                    }
                    
                    const newReply = createReplyElement('我', replyText, '刚刚');
                    repliesContainer.appendChild(newReply);
                }
            }
        });
    });

    // 相关帖子点击
    document.querySelectorAll('.related-post-item').forEach(item => {
        item.addEventListener('click', function() {
            alert('跳转到相关帖子: ' + this.querySelector('.related-post-title').textContent);
        });
    });

    // 加载更多评论
    const loadMoreBtn = document.querySelector('.load-more-comments .btn');
    if (loadMoreBtn) {
        loadMoreBtn.addEventListener('click', function() {
            // 模拟加载更多评论
            const commentsList = document.querySelector('.comments-list');
            const newComment = createCommentElement('用户' + Math.floor(Math.random() * 100), '这是一条新加载的评论内容...', '5分钟前');
            commentsList.appendChild(newComment);
            
            // 重新绑定新评论的事件
            bindCommentEvents(newComment);
        });
    }
}

// 创建评论元素
function createCommentElement(name, content, time) {
    const commentDiv = document.createElement('div');
    commentDiv.className = 'comment-item';
    commentDiv.innerHTML = `
        <div class="comment-avatar">${name.charAt(0)}</div>
        <div class="comment-content">
            <div class="comment-header">
                <span class="commenter-name">${name}</span>
                <span class="comment-time">${time}</span>
            </div>
            <div class="comment-text">${content}</div>
            <div class="comment-actions">
                <button class="comment-action-btn">👍 点赞 (0)</button>
                <button class="comment-action-btn">💬 回复</button>
            </div>
        </div>
    `;
    
    // 绑定事件
    bindCommentEvents(commentDiv);
    return commentDiv;
}

// 创建回复元素
function createReplyElement(name, content, time) {
    const replyDiv = document.createElement('div');
    replyDiv.className = 'reply-item';
    replyDiv.innerHTML = `
        <div class="reply-avatar">${name.charAt(0)}</div>
        <div class="reply-content">
            <span class="reply-author">${name}:</span>
            <span class="reply-text">${content}</span>
            <span class="reply-time">${time}</span>
        </div>
    `;
    return replyDiv;
}

// 绑定评论事件
function bindCommentEvents(commentElement) {
    const actionBtns = commentElement.querySelectorAll('.comment-action-btn');
    actionBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            if (this.textContent.includes('点赞')) {
                const currentCount = parseInt(this.textContent.match(/\d+/)[0] || 0);
                if (this.classList.contains('liked')) {
                    this.classList.remove('liked');
                    this.style.color = '';
                    this.textContent = `👍 点赞 (${currentCount - 1})`;
                } else {
                    this.classList.add('liked');
                    this.style.color = 'var(--primary-color)';
                    this.textContent = `👍 点赞 (${currentCount + 1})`;
                }
            } else if (this.textContent.includes('回复')) {
                const replyText = prompt('请输入回复内容:');
                if (replyText) {
                    const commentItem = this.closest('.comment-item');
                    let repliesContainer = commentItem.querySelector('.replies');
                    if (!repliesContainer) {
                        repliesContainer = document.createElement('div');
                        repliesContainer.className = 'replies';
                        commentItem.appendChild(repliesContainer);
                    }
                    
                    const newReply = createReplyElement('我', replyText, '刚刚');
                    repliesContainer.appendChild(newReply);
                }
            }
        });
    });
}

// 在页面切换时初始化帖子详情交互
const originalShowPage = showPage;
showPage = function(pageId) {
    originalShowPage(pageId);
    if (pageId === 'post') {
        setTimeout(initPostDetailInteractions, 100);
    }
};
</script>

</body>
</html>